<template>
  <div id="message">
   <img src="../assets/imgs/1.jpg" alt="" style="width:100%;hight:800px">

   <header :style="{color: Color}"> 
      <Icon type="md-ribbon"></Icon>当前位置: <router-link style="cursor:pointer" tag="span" to="/">首页</router-link> > 联系我们
      </header>
        <div id="container">
          <div class="card" v-for="(item, index) in talkdata" :key="index">
            <img v-lazy="item.imgsrc">  
            <p>{{item.content}}</p>
            <p>{{item.datetime}}</p>
          </div>
      </div>

<div class="from">
  <form action="">
     <input type="text" placeholder="姓名" class="name">
     <input type="text" placeholder="电话" class="phone">
     <input type="text" placeholder="邮箱" class="mail">
     <textarea  id="box" placeholder="内容"></textarea>
     <button class="submit">SUBMIT</button>
   </form>
</div>
   

   <!-- <baidu-map class="bm-view">
  </baidu-map> -->
   <baidu-map class="bm-view" ak="xROV4s8da8EXe2hQ8LwZnRH47XjG1UEx"  :center="center" :zoom="zoom" @ready="handler">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'


  export default {
    name:'leaveMessage',
    components:{
      BaiduMap,
      
    },
    data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
   
  }
</script>
<style lang="scss" scope>
.bm-view {
  
  width: 100%;
  height: 600px;
  
}
.from{
  margin-top: 20px;
  text-align: center;
  width: 90%;
  height: 650px;
}
.name{
  width: 280px;
  height: 50px;
  margin-left: 80px;
  margin-right: 80px;
  background-color: rgb(221, 216, 216);
}
.phone{
  width: 280px;
  height: 50px;
  margin-right: 80px;
  background-color: rgb(221, 216, 216);
}
.mail{
  width: 280px;
  height: 50px;
  margin-right: 40px;
  background-color: rgb(221, 216, 216);
}
#box{
  width: 992px;
  height: 400px;
  margin-left: 58px;
  margin-top: 80px;
  background-color: rgb(221, 216, 216);
}
.submit{
  width: 280px;
  height: 50px;
  margin-top: 20px;
  margin-right: 40px;
  background-color: rgb(221, 216, 216);
}
</style>